.common-pagination() {
  pointer-events: none;
  position: absolute;
  top: 0;
  display: block;
  width: 59px;
  height: 100%;
  content: ' ';
  z-index: 1;
}

.@{tabBarPrefixClass} {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;

  &-tab {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
  }

  &-tab-active {
    color: @tabs-color;
  }

  &-underline {
    position: absolute;
    border: 1px @tabs-color solid;
  }

  &-animated &-content {
    transition: transform @effect-duration @easing-in-out;
    will-change: transform;
  }

  &-animated &-underline {
    transition: top @effect-duration @easing-in-out,
      left @effect-duration @easing-in-out,
      color @effect-duration @easing-in-out,
      width @effect-duration @easing-in-out;
    will-change: top, left, width, color;
  }

  &-top,
  &-bottom {
    flex-direction: row;

    .@{tabBarPrefixClass} {
      &-content {
        display: flex;
        width: 100%;
        flex-direction: row;
      }

      &-prevpage {
        .common-pagination();

        left: 0;
        background: linear-gradient(
          to right,
          @page-show-color,
          @page-hide-color
        );
      }

      &-nextpage {
        .common-pagination();

        right: 0;
        background: linear-gradient(
          to right,
          @page-hide-color,
          @page-show-color
        );
      }

      &-tab {
        padding: 8px 0;
      }

      &-underline {
        bottom: 0;
      }
    }
  }

  &-top {
    border-bottom: 1px #eee solid;
  }

  &-bottom {
    border-top: 1px #eee solid;
  }

  &-left,
  &-right {
    flex-direction: column;

    .@{tabBarPrefixClass} {
      &-content {
        display: flex;
        height: 100%;
        flex-direction: column;
      }

      &-tab {
        padding: 0 8px;
      }
    }
  }

  &-left {
    border-right: 1px #eee solid;

    .@{tabBarPrefixClass} {
      &-underline {
        right: 0;
      }
    }
  }

  &-right {
    border-left: 1px #eee solid;

    .@{tabBarPrefixClass} {
      &-underline {
        left: 0;
      }
    }
  }
}
